<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#sun{
			width:200px; height: 200px; background: orange;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		//y = ax^2 + bx + c
		//曲线过原点，则C为0
		//a = 1;
		//b = ????
		
		onload = function(){
			var earth = document.getElementById("earth");
			var moon = document.getElementById("moon");
			
			//坐标系原点 
			var centerPoint = {x: earth.offsetLeft, y: earth.offsetTop};
			
			//目标的坐标
			var targetPoint = {x: moon.offsetLeft - centerPoint.x, y: moon.offsetTop - centerPoint.y};
			
			var a = 0.002;
			
			var b = (targetPoint.y - a*(targetPoint.x*targetPoint.x))/targetPoint.x;
			
			//开始抛物线
			var x = 0;
			var move = setInterval(function(){
				earth.style.left = centerPoint.x + (x+=10) + "px";
				earth.style.top = centerPoint.y + (a*x*x+b*x) + "px";
				if(earth.offsetLeft >= moon.offsetLeft){
					clearInterval(move);
				}
			},20);
		}
		
	</script>
	<body>
		<div id="earth" style="width: 10px; height: 10px; border-radius: 50%; position: absolute; left:100px; top: 400px; background: blue;">
			
		</div>
		
		<div id="moon" style="width: 10px; height: 10px; border-radius: 50%; position: absolute; left:800px; top: 200px; background: gray;">
			
		</div>
	</body>
</html>
